<template>
  <div class="">
    <homeHeader @searchChange="searchChange"></homeHeader>
    <history
      v-if="!searchObj.length && $store.state.objList"
      @searchChange="searchChange"
    ></history>
    <ul v-else>
      <li v-for="(v, i) in searchObj" :key="i">{{ v.goods_name }}</li>
    </ul>
  </div>
</template>

<script>
import homeHeader from "@/components/homeHeader.vue";
import history from "@/components/history.vue";
import axios from "axios";
import { ref } from "vue";
export default {
  setup() {
    let searchObj = ref([]);
    function searchChange(e) {
      axios
        .get(
          "https://api-hmugo-web.itheima.net/api/public/v1/goods/qsearch?query=" +
            e
        )
        .then((res) => {
          console.log(res);
          searchObj.value = res.data.message;
        });
    }
    return {
      searchChange,
      searchObj,
    };
  },
  components: {
    homeHeader,
    history,
  },
};
</script>

<style lang="scss" scoped></style>
